<script setup lang="ts">
import { watch, ref, computed } from "vue";
import leftCompWrapper from "../common/leftCompWrapper.vue";
import { getAssetsFile } from "@visual/utils";

defineOptions({
  name: "rightList"
});
const isCollapsed = ref(false);
const props = withDefaults(
  defineProps<{
    propValue?: {
      contentList: Array<any>;
      title?: string;
      maxheight?: string;
      collapsed?: boolean;
      iconName?: string;
      size?: string;
    };
  }>(),
  {
    propValue: () => ({
      maxheight: "400px",
      contentList: [],
      title: "",
      collapsed: false,
      iconName: "alert",
      size: "normal"
    })
  }
);

const classes = (type: number) => {
  let types = [0, 1, 2, 3];
  return {
    "list-item-color-normal": type === 0,
    "list-item-color-warn": type === 1,
    "list-item-color-error": type === 2,
    "list-item-color-offline": type === 3,
    "list-item-color-defalut": !types.includes(type)
  };
};
watch(
  props,
  () => {
    console.log("ListDepNotice", props);
  },
  {
    immediate: true,
    deep: true
  }
);
function convertStringToNumber(val) {
  let num = !isNaN(Number(val)) ? Number(val) : val;
  switch (num) {
    case 1:
      return "正常";
    case 2:
      return "停机";
    case 3:
      return "异常";
    case 4:
      return "离线";
    default:
      return num;
  }
}
</script>

<template>
  <leftCompWrapper v-model="isCollapsed" :title="propValue.title" :icon-name="propValue.iconName" :has-collapsed="propValue.collapsed">
    <div v-if="isCollapsed || !propValue.collapsed" class="list-warpper">
      <div
        v-for="(item, index) in props?.propValue.contentList"
        :key="item.tagNum ? item.tagNum : index"
        class="list-item-content"
        :class="{ 'w-[33%]': propValue.size === 'small', 'w-[50%]': propValue.size === 'normal' }"
      >
        <div v-if="item.icon" class="item-icon" :class="`item-icon-${item.icon}`">
          <img :class="`list-icon-${item.icon}`" :src="getAssetsFile(item.icon)" />
        </div>
        <div class="list-item-val-title">
          <div class="list-item-content-title">{{ item.title }}</div>
          <div class="list-item-content-val">
            <span :class="classes(item.status)">{{ convertStringToNumber(item.value) }}</span>
          </div>
        </div>
      </div>
    </div>
  </leftCompWrapper>
</template>

<style lang="scss" scoped>
$listIcon: list-icon-;
$itemIcon: item-icon-;
$itemType: list-item-color-;
.#{$itemType}normal {
  color: #10b981;
}
.#{$itemType}warn {
  color: #f59e0b;
}
.#{$itemType}error {
  color: #ef4444;
}
.#{$itemType}offline {
  color: #909399;
}
.#{$itemType}default {
  color: #000;
}

.list-warpper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;

  .list-item-content {
    display: flex;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 16px;
    font-weight: 700;
    line-height: 17px;
    color: #000;

    .list-item-val-title {
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      color: #000;

      .list-item-content-val {
        font-size: 22px;
        font-weight: 600;
        line-height: 24px;
        color: #000;

        .list-item-content-unit {
          font-size: 12px;
          font-weight: 400;
          line-height: 12px;
        }
      }
    }
  }

  .item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 12px;
    border-radius: 4px;
  }
  .#{$listIcon}water,
  .#{$listIcon}totalwater {
    width: 16px;
    height: 20px;
  }
  .#{$listIcon}purewater {
    width: 20px;
    height: 18px;
  }
  .#{$listIcon}wastewater {
    width: 16px;
    height: 20px;
  }
  .#{$listIcon}elector {
    width: 20px;
    height: 16px;
  }
  .#{$itemIcon}water {
    background-color: rgb(71 134 255 / 15%);
  }
  .#{$itemIcon}totalwater {
    background: rgb(255 178 102 / 15%);
  }
  .#{$itemIcon}purewater {
    background: rgb(73 176 245 / 15%);
  }
  .#{$itemIcon}wastewater {
    background: rgb(139 138 230 / 15%);
  }
  .#{$itemIcon}elector {
    background: rgb(139 138 230 / 15%);
  }
}
</style>
